<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="专题名称">
        <el-input v-model="topiclist.name" style="width: 540px"></el-input>
      </el-form-item>

      <el-form-item label="专题描述">
        <el-input v-model="topiclist.title" style="width: 540px"></el-input>
      </el-form-item>

      <el-form-item label="专题图片">
        <!-- 预览图片用 -->
        <img :src="valueUrl" style="width: 540px" />
      </el-form-item>

      <el-upload
        class="upload-demo"
        action="http://localhost:3000/topic/upload"
        :on-success="uploadSuccess"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">更换图片</el-button>
      </el-upload>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">更新</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchById, update, add, delstorage } from "@/api/topic";
export default {
  data() {
    return {
      isDisabled: true,
      valueUrl: "",
      topiclist: {},
      newtopiclist: {},
    };
  },
  created() {
    if (this.$route.query.id) {
      fetchById({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res.data[0]);
        this.topiclist = res.data[0];
        this.valueUrl = res.data[0].download_url;
      });
    }
  },
  methods: {
    uploadSuccess(res) {
      console.log(res);
      console.log(res.id_list.file_list.length);
      if (res.id_list.file_list.length > 0) {
        this.valueUrl = res.id_list.file_list[0].download_url;
        this.newtopiclist.newfileid = res.id_list.file_list[0].fileid;
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
    },

    onSubmit() {
      this.newtopiclist.name = this.topiclist.name;
      this.newtopiclist.title = this.topiclist.title;
      if (this.$route.query.id) {
        this.newtopiclist._id = this.topiclist._id;
        this.newtopiclist.fileid = this.topiclist.fileid;
        update(this.newtopiclist).then((res) => {
          console.log(res);
          if (res.data.modified > 0) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
          } else {
            this.$message.error("更新失败");
            return;
          }
          this.$router.push("/topic/list");
        });
      } else {
        if (
          this.newtopiclist.name &&
          this.newtopiclist.title &&
          this.newtopiclist.newfileid
        ) {
          console.log(this.newtopiclist);
          add(this.newtopiclist).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              this.$message({
                message: "更新成功",
                type: "success",
              });
            } else {
              this.$message.error("更新失败");
              return;
            }
            this.$router.push("/topic/list");
          });
        }
      }
    },
    onCancel() {
      if (this.newtopiclist.newfileid) {
        console.log(this.newtopiclist.newfileid);
        console.log(11111);
        delstorage(this.newtopiclist).then((res) => {
          console.log(res);
        });
      }
      this.$router.push("/topic/list");
    },
  },
};
</script>

<style scoped>
</style>



